<template>
	<view class="page">
		<uni-card>
			<uni-row>
				<uni-col :span="4" class="col-left">
					<image src="../../static/clock.png" class="clock"></image>
				</uni-col>
				<uni-col :span="20">
					<text class="reservation">预约入园时间</text><br>
					<text class="time">2024年9月11日  13:00-16:00  </text>
				</uni-col>
			</uni-row>
		</uni-card>
		<text class="subscriber">主预约人</text>
		<view>
			<uni-card>
			<uni-forms ref="userForm" :modelValue="userData" :rules="userRules">
				<view class="texts">
					<text class="card-text">姓名</text>
					<text class="star">*</text>
					<text class="card-text">：</text>
				</view>
				<!--name-->
				<uni-forms-item name="name">
					<input class="input" v-model="userData.name" placeholder="请输入预约人姓名" 
					placeholder-style="
						font-weight: 400;
						font-size: 15px;
						color: #686868;
					"/>
				</uni-forms-item>
				
				<view class="texts">
					<text class="card-text">证件类型</text>
					<text class="star">*</text>
					<text class="card-text">：</text>
				</view>
				<!--type-->
				<uni-forms-item name="type">
				<view style="margin-bottom: -4px;">
					<uni-combox :candidates="candidates" placeholder="请选择证件类型" v-model="userData.type"></uni-combox>
				</view>
				</uni-forms-item>
			
				<view class="texts">
					<text class="card-text">证件号码</text>
					<text class="star">*</text>
					<text class="card-text">：</text>
				</view>
				<!--number-->
				<uni-forms-item name="number">
				<input class="input" placeholder="请输入证件号码" v-model="userData.number"
				placeholder-style="
					font-weight: 400;
					font-size: 15px;
					color: #686868;
				"/>
				</uni-forms-item>
				
				<view class="texts">
					<text class="card-text">手机号码</text>
					<text class="star">*</text>
					<text class="card-text">：</text>
				</view>
				<!--tel-->
				<uni-forms-item name="tel">
					<input class="input" placeholder="请输入手机号码" v-model="userData.tel"
					placeholder-style="
						font-weight: 400;
						font-size: 15px;
						color: #686868;
					"/>
				</uni-forms-item>
				<view>
					<uni-row>
					<uni-col :span="2">
						<checkbox-group @change="changeChildren">
							<checkbox class="check" value="checked" activeBackgroundColor="#8DCB6D" checked="false" color="#FFFFFF" style="transform:scale(0.7)" />
						</checkbox-group>
					</uni-col>
					<uni-col :span="22">
						<text class="mag">同行人有6周岁（含）以下或身高1.2米（含）以下儿童，<br>只需选择儿童数。</text>
					</uni-col>
					</uni-row>
					
					<!--checkbox-->
					<view>
						<uni-forms-item>
							<uni-data-checkbox :disabled="isDisabled" class="checkbox" mode="tag" :localdata="num" v-model="userData.children">
							</uni-data-checkbox>
						</uni-forms-item>
					</view>
				</view>
			</uni-forms>
			</uni-card>
		</view>
		
		<!--card.vue-->
		<view v-for="(item, peopleNum) in arr" :key="peopleNum">
			<text class="people">同行人{{peopleNum+1}}</text>
			<image class="del" src="../../static/delete.png" @click="delCard(peopleNum)"></image>
			<card @getCardInfo = "updateValue(peopleNum, $event)"></card>
		</view>
		
		<uni-card class="card-add">
			<button class="btn-add" @click="addCard()"><text class="add-text">✚&nbsp添加同行人</text></button>
		</uni-card>
		
		<view class="container">
			<image class="img-inform" src="../../static/inform.png"></image>
			<text class="inform">最多可预约成人4人，儿童3人</text>
		</view>
		<button @click="submit()" class="btn-submit"><text class="submit-text">提交预约</text></button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import card from '../../pages/components/card.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive } from 'vue';
	
	let candidates = ref(['中国居民身份证', '其他']);
	let num = ref([{text: '1人',value: 1}, {text: '2人',value: 2}, {text: '3人',value: 3}]);
	let date= ref('value');
	let time= ref('value');
	onLoad((options) => {
		date = options.date
		time = options.time
	})
	
	//表单验证
	const userRules = {
		name:{
			rules:[{required: true,errorMessage: '姓名不能为空'}]
		},
		type:{
			rules:[{required: true,errorMessage: '证件种类不能为空'}]
		},
		number:{
			rules:[{required: true,errorMessage: '证件号码不能为空'}]
		},
		tel:{
			rules:[{required: true,errorMessage: '电话号码不能为空'}]
		}
	};
	//卡片信息框
	let arr = ref([]);
	//表单信息
	let userData = ref({name: '',type: '',number: '',tel: '',children: 0});
	
	let isDisabled = ref(true);
	let changeChildren = function(e){
		console.log(e.detail.value);
		isDisabled.value = e.detail.value =="checked" ? false : true;
	}
	
	let index = ref(0);
	let addCard = function(){
		console.log(index.value);
		
		//预约人数
		if(index.value<3){
			index.value++;
			arr.value.push({
				name: '',type: '',number: '',tel: ''
			})
		}else{
			alert("同行人最多可预约4人");
		}
	}
	
	let delCard = function(number){
		let flag = confirm("确认删除?");
		if(flag){
			index.value--;
			arr.value.splice(number, 1);
		}
	}
	
	let updateValue = function(index, peopleInfo) {
		arr[index]=peopleInfo;
		for(let i=0;i<arr.value.length;i++){
			console.log(arr[i].value);
		}
	}
	
	let peopleInfoArray = [];
	let userForm = ref(null);
	//提交预约
	const submit = function(){
		userForm.value.validate().then(res=>{
				console.log('表单数据信息：', res);
				
				if(isDisabled.value){
					userData.value.children=0;
				}
				//处理信息，将两个数组合并为一个对象数组
				peopleInfoArray.push(userData.value);
				for(let i=0;i<index.value;i++){
					peopleInfoArray.push(arr[i].value);
				}
				console.log(peopleInfoArray);
				let userInfoStr = JSON.stringify(peopleInfoArray);
				const app = getApp();  
				
				
				uni.navigateTo({
					url:'/pages/yy/success?userData=' + encodeURIComponent(userInfoStr),
					
				})
				
				
			}).catch(err =>{
				console.log('表单错误信息：', err);
		});
	}
	
</script>

<style>
	button::after{ border: none;}
	.del{
		width: 16px;
		height: 16px;
		padding-top: 4px;
		margin-right: 16px;
		float: right;
	}
	.people{
		margin-left: 16px;
		font-family: PingFangSC-Medium;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.submit-text{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.btn-submit{
		border: #8DCB6D solid 1px;
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
		margin: 0px 16px;
	}
	.container{
		display: flex;
		align-items: center; /* 垂直居中 */
		padding-bottom: 25px;
	}
	.img-inform{
		width: 14px;
		height: 14px;
		margin-left: 15px;
	}
	.inform{
		opacity: 0.75;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #323232;
		padding-left: 8px;
	}
	.btn-add{
		border: none;
		background-color: #FFFFFF;
	}
	.add-text{
		display: flex;
		align-items: center; /* 垂直居中 */
		justify-content: center;
		
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 15px;
		color: #323232;
		letter-spacing: 0;
	}
	.check{
		
		margin-left: -4px;
	}
	.mag{
		opacity: 0.75;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #323232;
		letter-spacing: 0;
		line-height: 0;
	}
	.texts{
		margin-bottom: 6px;
	}
	.input{
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		margin-bottom: -4px;
		padding-left: 14px;
		color: #000000;
	}
	.star{
		font-size: 15px;
		font-weight: 400;
		color: #e8240f;
		line-height: 0;
	}
	.card-text{
		color: #05261b;
		font-size: 15px;
		font-face: PingFangSC;
		font-weight: 400;
		line-height: 0;
		letter-spacing: 0;
		paragraph-spacing: 0;
		text-align: left;
	}
	.subscriber{
		margin-left: 15px;
		font-family: PingFangSC-Medium;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.reservation{
		width: 72px;
		height: 17px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #000000;
		letter-spacing: 0;
	}
	.time{
width: 212px;
height: 21px;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 15px;
color: #000000;
letter-spacing: 0;
	}
	.checkbox{
		flex: none;
		display: flex;
		justify-content: flex-end;
	}
	.card-add{
		border: 1px dashed #8DCB6D;
		border-radius: 12px;
	}
	.col-left{
		padding-top: 4px;
	}
	.clock{
		width: 38px;
		height: 38px;
		/*opacity: 0;*/
	}
</style>
